<template>
  <div class="home-page-config">
    <ConfigContainer
      title="banner配置"
      img-key="bannerImage"
      style="margin-bottom: 40px"
      :max-upload-count="4"
      :data-source="bannerList"
      @del="handleDel"
      @upload="handleUpload(Source.BANNER)"
      @edit="handleEdit($event, Source.BANNER)"
    />
    <!--    <ConfigContainer-->
    <!--      title="金刚位配置"-->
    <!--      :max-upload-count="4"-->
    <!--      :data-source="jinGangList"-->
    <!--      :config-item-style="{ width: '150px', height: '150px' }"-->
    <!--      @del="handleDel"-->
    <!--      @upload="handleUpload(Source.jinGang)"-->
    <!--      @edit="handleEdit($event, Source.banner)"-->
    <!--    />-->

    <HomePageConfigModal width="40%" @register="registerModal" @success="handleSuccess" />
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { Source } from './data';
  import mcApi from 'mc-c2b2m-operator-api';
  import HomePageConfigModal from './modal.vue';
  import { useModal } from '@/components/Modal';
  import { ActionTypeEnum } from '@/enums/commonEnum';
  import { useMessage } from '@/hooks/web/useMessage';
  import ConfigContainer from './components/ConfigContainer.vue';
  import { BannerModel } from 'mc-c2b2m-operator-api/types/opreation';

  const { OperationModule } = mcApi;
  const { HomeConfigApi } = OperationModule;

  const bannerList = ref<BannerModel[]>([]);
  // const jinGangList = ref([]);
  const [registerModal, { openModal }] = useModal();

  function getBanner() {
    const params = { pageNo: 1, pageSize: 99 };
    HomeConfigApi.getBannerPage(params).then((res: any) => {
      bannerList.value = res?.items || [];
    });
  }
  getBanner();

  const { createMessage, createConfirm } = useMessage();
  function handleDel(id: string) {
    createConfirm({
      title: '提示',
      iconType: 'warning',
      content: '是否确认删除？',
      onOk: async () => {
        await HomeConfigApi.deleteBanner(id);
        createMessage.success('删除成功！');
        getBanner();
      },
    });
  }

  function handleEdit(id: string, source: string) {
    openModal(true, { id, source, actionType: ActionTypeEnum.EDIT });
  }

  function handleUpload(source: Source) {
    openModal(true, { source, actionType: ActionTypeEnum.ADD });
  }

  function handleSuccess() {
    getBanner();
  }
</script>

<style scoped lang="less">
  .home-page-config {
    padding: 24px;
    background: #fff;
  }
</style>
